<template>
  <div id="data-table" class="data-table" v-show="enlargeTable">
    <h3 class="time-chang-style">{{currentYearMonth.split("-")[0]}}年</h3>
    <div class="title">
      <span>数据</span>
      <i class="close el-icon-close" @click="closeInfoWin"></i>
    </div>
    <div class="nav">
      <!-- <span class="pos">专题 :&nbsp;</span> -->
      <el-select v-model="value" size="mini" placeholder="请选择" :popper-append-to-body="false">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <!-- <span class="pos" style="color:#606266;">单位 : ({{unit}})</span> -->
    </div>
    <div class="table-container">
      <div
      class="table-content"
      v-loading="loading"
      element-loading-text="加载中，请稍后……"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(23,128,154,0.9)"
      element-loading-customClass="table-loading-box"
      >
        <div class="table-data" id="el-table-data-contain">
          <el-table
          :data="resultData.value"
          size="mini"
          highlight-current-row
          border
          ref="table"
          :fit=false
          :width="tableWidth"
          >
            <el-table-column
              type="index"
              :show-overflow-tooltip="true"
              :index="indexMethod"
              title="序号"
              align="center"
            ></el-table-column>
            <el-table-column
              v-for="(key, index) in resultData.header"
              :key="index"
              :label="key.name"
              :prop="key.name"
              align="center"
              :show-overflow-tooltip="true"
              :min-width="key.width"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { constants } from "crypto";
import { mapState, mapMutations, mapActions } from "vuex";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
export default {
  name: "data-table",
  data() {
    return {
      options: [],
      value: "",
      isResize: false,
      resultData: {
        key: [],
        value: [],
        id: "",
        header:[]
      },
      tableWidth:"330",
      resultTableChangeData: [], //存放所有表格的数据便于切换
      regionCodes: [],
      unit: "",
      unitMap: config.analystUnitMap,
      left: document.documentElement.clientWidth - 410,
      top: 150,
      currenHover: "",
      idenData: null,
      loading:false,//加载动画
    };
  },
  computed: {
    ...mapState({
      showDataTable: state => state.macro.showDataTable,
      currQuotaMetaData: state => state.macro.currQuotaMetaData,
      regionCodeArray: state => state.macro.regionCodeArray,
      currQuotaGroups: state => state.macro.currQuotaGroups,
      idenCode: state => state.macro.idenCode,
      periodType: state => state.macro.periodType,
      currentIdens: state => state.macro.currentIdens,
      startTime: state => state.macro.startTime,
      currentYearMonth: state => state.macro.currentYearMonth,
      yearMonthList: state => state.macro.yearMonthList,
      enlargeTable: state => state.macro.enlargeTable
    })
  },
  mounted() {
    this.initEvent();
  },
  created() {},
  watch: {
    value(now, old) {
      this.resultData = [];
      this.resultTableChangeData.map(item => {
        if (item.idenCode == now) {
          this.resultData = item;
          this.getNewIden(item.idenCode);
        }
      });
      this.setTableHeaderWidth();
    },
    showDataTable(val, oldVal) {}
  },
  methods: {
    ...mapMutations(["changeShowDataTable"]),
    //设置表头宽度
    setTableHeaderWidth(){
      let that = this;
      that.loading = true;
      let tableWidth = 0;
      let keyArr = [];
      this.resultData.key.map(item=>{
        let width = (item.length+2)*16;
        this.resultData.value.map(ite=>{
          if(ite[item]){
            let iteWidth = (ite[item].length+2)*16;
            if(iteWidth> width){
            width = iteWidth;
            }
          }
        })
        let  newwidth = width.toString();
        tableWidth +=  Number(newwidth)
        keyArr.push({
          name:item,
          width:newwidth
        })
        // return item
      })
      this.resultData.header = keyArr;
      this.tableWidth = (tableWidth+20).toString()

      setTimeout(function(){
        that.loading = false;
      },500)
    },
    initEvent() {
      EventBus.$on("formateTableData-spatialAnalysis", this.formateTableData);
      EventBus.$on("iden-change", this.getNewIden);
      EventBus.$on("iden-change-table", this.getLayerData);
      EventBus.$on(
        "formateChangeCurrentData-spatialAnalysis",
        this.changeFormateData
      );
    },
    getLayerData(data) {
      this.value = data.idenData;
      this.idenData = data.idenData;
    },
    getNewIden(data) {
      this.value = data;
    },
    labelHead(h, { column, $index }) {
      let l = column.label.length + 2;
      let f = 16;
      column.minWidth = f * l;
      this.$refs["table"].doLayout();
      return h("div", [column.label]);
    },
    formateTableData(data) {
      if (data) {
        document.getElementById("el-table-data-contain").style.width = "100%";
        this.options = [];
        this.resultTableChangeData = [];
        this.currentIdens.map(item => {
          this.options.push({
            value: item.idenCode,
            label: item.idenName
          });
          let objKey = ["区划"];
          let objVal = [];
          this.regionCodeArray.map(region => {
            let key = `${region}-${item.idenCode}-${region}-${this.periodType}-${item.idenCode}-${region}-${this.currentYearMonth}`;
            if (data.formateData.formatValue[key]) {
              let current_value = {};
              let currentRegionData = data.formateData.formatValue[key];
              if (item.idenCode == currentRegionData.iden_code) {
                objKey.push(currentRegionData.iden_name_hierarchical);
                current_value[currentRegionData.iden_name_hierarchical] =
                  currentRegionData.value;
                current_value["区划"] =
                  currentRegionData.ident_name_hierarchical;
                current_value["region_code"] = currentRegionData.region_code;
                this.currQuotaGroups.map(group => {
                  if (item.id == group.id) {
                    if (group.data.length) {
                      group.data.map(groupIdenVal => {
                        let currentGroupVal =
                          data.formateData.formatValue[
                            `${region}-${item.idenCode}-${groupIdenVal}-${this.periodType}-${item.idenCode}-${groupIdenVal}-${this.currentYearMonth}`
                          ];
                        if (currentGroupVal) {
                          objKey.push(currentGroupVal.ident_name_hierarchical);
                          current_value[
                            currentGroupVal.ident_name_hierarchical
                          ] =
                            currentGroupVal.value == "null"
                              ? "-"
                              : currentGroupVal.value;
                        }
                      });
                    }
                  }
                });
              }
              objVal.push(current_value);
            }
          });
          this.resultTableChangeData.push({
            idenCode: item.idenCode,
            key: Array.from(new Set(objKey)),
            // value: objVal.sort((this.compare(item.idenName)))
            value: objVal
          });
        });
        if (this.value) {
          this.value = this.currentIdens[0].idenCode;
          this.resultTableChangeData.map(item => {
            if (item.idenCode == this.value) {
              this.resultData = item;
              this.setTableHeaderWidth();
              EventBus.$emit("iden-change", item.idenCode);
            }
          });
        } else {
          this.value = this.currentIdens[0].idenCode;
        }
      } else {
      }
    },
    changeFormateData(data) {
      if (data) {
        document.getElementById("el-table-data-contain").style.width = "100%";
        this.options = [];
        this.resultTableChangeData = [];
        this.currentIdens.map(item => {
          this.options.push({
            value: item.idenCode,
            label: item.idenName
          });
          let objKey = ["区划"];
          let objVal = [];
          this.regionCodeArray.map(region => {
            let key = `${region}-${item.idenCode}-${region}-${this.periodType}-${item.idenCode}-${region}-${this.currentYearMonth}`;
            if (data.formateData.formatValue[key]) {
              let current_value = {};
              let currentRegionData = data.formateData.formatValue[key];
              if (item.idenCode == currentRegionData.iden_code) {
                objKey.push(currentRegionData.iden_name_hierarchical);
                current_value[currentRegionData.iden_name_hierarchical] =
                  currentRegionData.value;
                current_value["区划"] =
                  currentRegionData.ident_name_hierarchical;
                current_value["region_code"] = currentRegionData.region_code;
                this.currQuotaGroups.map(group => {
                  if (item.id == group.id) {
                    if (group.data.length) {
                      group.data.map(groupIdenVal => {
                        let currentGroupVal =
                          data.formateData.formatValue[
                            `${region}-${item.idenCode}-${groupIdenVal}-${this.periodType}-${item.idenCode}-${groupIdenVal}-${this.currentYearMonth}`
                          ];
                        if (currentGroupVal) {
                          objKey.push(currentGroupVal.ident_name_hierarchical);
                          current_value[
                            currentGroupVal.ident_name_hierarchical
                          ] =
                            currentGroupVal.value == "null"
                              ? "-"
                              : currentGroupVal.value;
                        }
                      });
                    }
                  }
                });
              }
              objVal.push(current_value);
            }
          });
          this.resultTableChangeData.push({
            idenCode: item.idenCode,
            key: Array.from(new Set(objKey)),
            // value: objVal.sort((this.compare(item.idenName)))
            value: objVal
          });
        });
        if (this.value) {
          this.resultTableChangeData.map(item => {
            if (item.idenCode == this.value) {
              this.resultData = item;
              this.setTableHeaderWidth();
              EventBus.$emit("iden-change", item.idenCode);
            }
          });
        } else {
          this.value = this.currentIdens[0].idenCode;
        }
      } else {
      }
    },
    closeInfoWin() {
      this.$store.commit("changeEnlargeTable", false);
      this.$store.commit("changeShowEchartPanel", true);
      this.$store.commit("changeShowDataTable", true);
    },
    // compare(property) {
    //   return function(a, b) {
    //     var value1 = a[property];
    //     var value2 = b[property];
    //     return Number(value2) - Number(value1);
    //   };
    // },
    indexMethod(index) {
      return index + 1;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.table-container {
  box-sizing: border-box;
  padding: 10px;
  height: 86%;
}
.data-table {
  font-size: 1.4rem;
  z-index: 900;
  height: 100%;
  background: $panelContentBg;
  -webkit-box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  .time-chang-style {
    position: absolute;
    color: #fff;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    top: 50px;
  }
  .title {
    height: 35px;
    background: $panelTitleBg;
    font-size: 1.6rem;
    color: $fontColorW;
    cursor: move;
    span {
      float: left;
      line-height: 35px;
      margin-left: 15px;
      font-weight: bold;
    }
    .close {
      float: right;
      line-height: 35px;
      margin-right: 8px;
      cursor: pointer;
      color: #fff;
    }
  }
  .el-table {
    max-width: inherit;
    width: inherit;
    min-width: 100%;
  }
  .nav {
    height: 45px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .table-content {
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    display: inline-block;
    .table-data {
      position: absolute;
      min-width: 100%;
    }
  
  }
}
</style>
<style lang="scss">
@import "../css/rule.scss";
.formMate-data-box {
  .nav{
    input{
      background: none;
      border: 1px solid rgb(47, 159, 187);
      border-radius: 2px;
      color: $fontColorLimit;
    }
  }
  #el-table-data-contain{
    .el-table{
      background: none;
      border: 1px solid #2f9fbb;
      .el-table__header{
        tr{
          background: none;
        }
      }
      tr{
        td{
          border-bottom: 1px solid #2f9fbb;
          border-right:1px solid #2f9fbb;
          color: $fontColorLimit;
        }
        th{
          border-bottom: 1px solid #2f9fbb;
          border-right:1px solid #2f9fbb;
          color: $fontColorLimit;
          background: none;
        }
      }
      .el-table__empty-text {
        color: $fontColorLimit;
      }
    }
    .el-table::before {
      height: 0px;
    }
     .el-table::after {
      height: 0px;
    }
  }
  .data-table {
    background: rgba(23, 128, 154, 0.9);
    .el-table__body-wrapper{
      table{
        tr{
          background: none;
        }
        tr:nth-child(odd){
          background: #2d98b3;
        }
      }
    }
    .el-loading-mask{
      .el-loading-spinner{
        i,p{
          color:$fontColorLimit;
        }
      }
    }
  }
}
</style>
